<template>
  <div id="login">
    <img class="logo" src="../assets/logo.png" alt="" />
    <div class="mid_box">
      <div class="mid_left_box"></div>
      <div class="mid_right_box">
        <div class="title">欢迎登录！</div>
        <p style="color:red">{{ error }}</p>
        <div class="control">
          <form action="LoginServlet" method="post">
            <!-- 表单向servlet传登录信息 -->
            <div class="dom" style="display: block">
              <form>
                <div id="s1">
                  <span>账号:</span>
                  <input
                    id="input"
                    v-model="phone"
                    type="text"
                    name="phone"
                    placeholder="手机号"
                  />
                </div>
                <div id="s1">
                  <span>密码:</span>
                  <input
                    id="input"
                    v-model="password"
                    type="password"
                    name="password"
                    placeholder="密码"
                  />
                </div>
                <el-button  type="primary"  @click="login()">登录</el-button>
                <el-button  type="primary" ><router-link to="/register" style="color:#FFF">注册</router-link></el-button>
              </form>
             
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      phone: "1",
      password: "1",
      error: "",
    };
  },
  methods: {
    login() {
      let data = qs.stringify({
        user_phone: this.phone,
        user_password: this.password,
      });
      // console.log(data);
      axios.post("api/Users/login.do", data).then((res) => {
        if (res.data == true) {
          console.log(1);
          sessionStorage.setItem("user",this.phone);
          this.$router.push("./subscribe");
        } else {
          this.error = "账号或密码错误";}
        // }1903010220詹林柏
      });
    },
  },
};
</script>
<style scoped>

@import "@/assets/css/login.css";
.el-button--primary {
    color: #FFF;
    background-color: #e30001;
    border-color: #e30001;
    border-radius: 10px;
}
</style>
